/*
 * @Date: 2022-03-29 12:59:36
 * @LastEditors: Please set LastEditors
 * @LastEditTime: 2022-04-11 19:45:53
 * @FilePath: /payment/pay/src/pages/PayGroundCard/PayGroundCardDetail.jsx
 */
import React, { useState, useEffect, useRef } from "react";
import zhCN from "antd/es/locale/zh_CN";
import {
  Row,
  Col,
  Button,
  Table,
  ConfigProvider,
  Select,
  DatePicker,
  Space,
  Form,
} from "antd";
import Tab from "../../components/Tabs";
import "./Card.css";
import { SearchOutlined } from "@ant-design/icons";
import { getCardDetails } from "./../../API/PayCard";
export default function PayGroundCardDetail() {
  //开始时间
  const [BFtime, setBFtime] = useState(null);
  //结束时间
  const [AFtime, setAFtime] = useState(null);
  //搜索框value值
  const AccountType = useRef(null);
  //绑定表单
  const [form] = Form.useForm();
  //表格数组
  const [data, setdata] = useState([]);
  //总条数
  const [total, settotal] = useState(null);
  //每页条数
  const [pageSize, setpageSize] = useState(2);
  useEffect(() => {
    CardDetails(10, 1);
  }, []);
  const CardDetails = (limit, page, leiXing, Cname) => {
    getCardDetails({
      limit: limit,
      page: page,
      leiXing: leiXing !== undefined ? leiXing : null,
      startTime: BFtime,
      endTime: AFtime,
      ksName: Cname !== undefined ? Cname : null,
    }).then((res) => {
      console.log(res);
      if (res.code === 200) {
        let arr = [];
        res.data.map((item, index) => {
          //console.log(item);
          let obj = {
            key: index,
            recordId: item.id,
            type: item.leiXing,
            CardId: item.ksName,
            CardName: item.ksName,
            CardNumber: item.yongHuId,
            OrderNumber: item.liuShuiHao,
            AmountBefore: item.dangQianYuE,
            money: item.money,
            AmountAfter: item.bianHuaHouMoney,
            remark: item.beiZhu,
            OperationTime: item.caoZuoShiJian,
          };
          arr.push(obj);
        });
        settotal(res.count);
        setdata(arr);
      }
    });
  };
  //查询按钮
  const onsearch = () => {
    form.validateFields().then((values) => {
      //form.resetFields();
      CardDetails(total, 1, values.AccountType, values.Card);
    });
  };

  const { Option } = Select;
  function onChangeBF(date, dateString) {
    console.log(dateString);
    setBFtime(dateString);
  }
  function onChangeAF(date, dateString) {
    console.log(dateString);
    setAFtime(dateString);
  }
  const columns = [
    {
      title: "记录ID",
      width: 100,
      dataIndex: "recordId",
      key: "recordId",
      sorter: (a, b) => a.ID - b.ID,
      fixed: "left",
    },
    {
      title: "类型",
      width: 100,
      dataIndex: "type",
      sorter: (a, b) => a.ID - b.ID,
      key: "type",
    },
    {
      title: "卡商名称",
      dataIndex: "CardName",
      key: "CardName",
      width: 150,
    },
    {
      title: "卡商号",
      dataIndex: "CardNumber",
      key: "CardNumber",
      width: 150,
    },
    {
      title: "订单号",
      dataIndex: "OrderNumber",
      key: "OrderNumber",
      width: 150,
    },
    {
      title: "变动前金额",
      dataIndex: "AmountBefore",
      key: "AmountBefore",
      width: 150,
    },
    {
      title: "变动金额",
      dataIndex: "money",
      key: "money",
      width: 150,
    },
    {
      title: "变动后金额",
      dataIndex: "AmountAfter",
      key: "AmountAfter",
      width: 150,
    },
    {
      title: "备注",
      dataIndex: "remark",
      key: "remark",
      width: 150,
    },
    { title: "操作时间", dataIndex: "OperationTime", key: "OperationTime" },
  ];
  //卡商列表的表格分页函数
  const CardPagechange = (pagination) => {
    setpageSize(pagination.pageSize);
    CardDetails(pageSize, pagination.current);
  };
  return (
    <div>
      <ConfigProvider locale={zhCN}>
        <Tab title={"卡商明细"}></Tab>
        <Form form={form}>
          <Row className="Input-one">
            <Col span={4}>
              <Form.Item name="AccountType">
                <Select
                  name="AccountType"
                  size="large"
                  placeholder="账变类型"
                  style={{ width: "100%" }}
                  ref={AccountType}
                >
                  <Option>账变类型</Option>
                  <Option value="入金账变">入金账变</Option>
                  <Option value="代付账变">代付账变</Option>
                  <Option value="手动上分">手动上分</Option>
                  <Option value="手动下分">手动下分</Option>
                  <Option value="提现">提现</Option>
                  <Option value="冲正">冲正</Option>
                  <Option value="其他">其他</Option>
                </Select>
              </Form.Item>
            </Col>
            <Col span={4} className="Iup-se">
              <Form.Item name="Card">
                <Select
                  name="Card"
                  size="large"
                  placeholder="卡商"
                  style={{ width: "100%" }}
                >
                  <Option>卡商</Option>
                  {data.map((item, index) => {
                    return (
                      <Option value={item.CardName} key={index}>
                        {item.CardName}
                      </Option>
                    );
                  })}
                  {/*  <Option value="b">入金账变</Option>
                  <Option value="c">代付账变</Option>
                  <Option value="d">手动上分</Option>
                  <Option value="e">手动下分</Option>
                  <Option value="f">提现</Option>
                  <Option value="g">冲正</Option>
                  <Option value="h">其他</Option> */}
                </Select>
              </Form.Item>
            </Col>
            <Col span={3} className="Iup-se">
              <Space direction="vertical">
                <DatePicker
                  onChange={onChangeBF}
                  size="large"
                  placeholder="开始时间"
                  showTime
                />
              </Space>
            </Col>
            <Col span={3}>
              <Space direction="vertical" className="Iup-se">
                <DatePicker
                  onChange={onChangeAF}
                  size="large"
                  placeholder="结束时间"
                  showTime
                />
              </Space>
            </Col>

            <Col span={2} className="Iup-se">
              <Button
                className="green"
                size="large"
                type="primary"
                icon={<SearchOutlined />}
                onClick={onsearch}
              >
                搜索
              </Button>
            </Col>
          </Row>
        </Form>
        <Table
          columns={columns}
          dataSource={data}
          bordered
          scroll={{ x: 1500, y: 400 }}
          onChange={CardPagechange}
          pagination={{
            total: total,
            pageSize: pageSize,
            pageSizeOptions: [5, 10, 30, 100],
            showQuickJumper: true,
          }}
        />
      </ConfigProvider>
    </div>
  );
}
